<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <#include "../../common/header.ftl">

    <link rel="stylesheet" href="${base}/res/js/bootstrap-fileinput/css/fileinput.min.css" crossorigin="anonymous">
    <script src="${base}/res/js/bootstrap-fileinput/js/fileinput.min.js" type="text/javascript"></script>
    <script src="${base}/res/js/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/i18n/defaults-zh_CN.min.js"></script>
</head>
<body class="btn-body">
<div class="container-fluid">
    <#include "../../common/left-nav.ftl">
    <form class="form-horizontal" id="dataForm">
    <div class="main-box">
        <ol class="breadcrumb crumbs always-top">
            <li><a href="${base}/admin/car">车辆管理</a></li>
            <li class="active">编辑</li>

            <div class="form-btns">
                <button type="submit" class="btn btn-primary btn-sm">
                    <span class="glyphicon glyphicon-floppy-disk"></span> 保存
                </button>

                <button type="button" class="btn btn-danger btn-sm" onclick="cancelJump()">
                    <span class="glyphicon glyphicon-remove"></span> 取消
                </button>
            </div>
        </ol>

            <input type="hidden" id="carId" name="id" value="${carId!}">
            <div class="container-fluid">
                <div class="row" style="margin-top: 20px;">
                    <div class="col-md-6">
                        <div class="panel panel-freight">
                            <div class="panel-heading"><b>车辆基础信息</b></div>
                            <div class="panel-body">
                                <div class="details-panel">
                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">车牌号</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="carNumber" maxlength="10"
                                                       placeholder="请输入车牌号" required
                                                       oninvalid="setCustomValidity('车牌号不能为空')"
                                                       oninput="setCustomValidity('')">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">车型</label>
                                            <div class="col-sm-10">
                                                <select class="selectpicker" title="请选择" name="type" required>
                                                    <option value="LARGE_CAR">重型货车</option>
                                                    <option value="MEDIUM_CAR">中型货车</option>
                                                    <option value="SMALL_CAR">轻型货车</option>
                                                    <option value="MINI_CAR">微型货车</option>
                                                    <option value="TRAILER">挂车</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">颜色</label>
                                            <div class="col-sm-10">
                                                <select class="selectpicker" title="请选择" name="color" required>
                                                    <option value="白色">白色</option>
                                                    <option value="黑色">黑色</option>
                                                    <option value="蓝色">蓝色</option>
                                                    <option value="绿色">绿色</option>
                                                    <option value="黄色">黄色</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">注册地</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="regAddr" maxlength="100"
                                                       placeholder="请输入车辆注册地，例：四川-成都">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">车架号</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="frameNo" maxlength="17"
                                                       placeholder="请输入17位车架号" required
                                                       oninvalid="setCustomValidity('请输入车架号')"
                                                       oninput="setCustomValidity('')">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">行驶证号</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="drivingNo" maxlength="12"
                                                       placeholder="请输入12位行驶证号码" required
                                                       oninvalid="setCustomValidity('请输入行驶证号码')"
                                                       oninput="setCustomValidity('')">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="panel panel-freight">
                            <div class="panel-heading"><b>运输信息</b></div>
                            <div class="panel-body">
                                <div class="details-panel">
                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">车厢尺寸</label>
                                            <div class="col-sm-9">
                                                <div class="row form-inline">
                                                    <div class="col-sm-4">
                                                        <input type="number" class="form-control" name="boxLong"
                                                               placeholder="长，单位：米" required step="0.1"
                                                               oninvalid="setCustomValidity('请输入车厢长度')"
                                                               oninput="setCustomValidity('')">
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <input type="number" class="form-control" name="boxWidth"
                                                               placeholder="宽，单位：米" required step="0.1"
                                                               oninvalid="setCustomValidity('请输入车厢宽度')"
                                                               oninput="setCustomValidity('')">
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <input type="number" class="form-control" name="boxHigh"
                                                               placeholder="高，单位：米" required step="0.1"
                                                               oninvalid="setCustomValidity('请输入车厢高度')"
                                                               oninput="setCustomValidity('')">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">车厢类型</label>
                                            <div class="col-sm-10">
                                                <select class="selectpicker" title="请选择" name="boxType" required>
                                                    <option value="FLAT">平板</option>
                                                    <option value="SEMI_TRAILER">半挂</option>
                                                    <option value="BARRIER">栏板</option>
                                                    <option value="FULLY_ENCLOSED">全封闭</option>
                                                    <option value="SEMI_CLOSED">半封闭</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">车身自重</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="weight"
                                                       placeholder="请输入车辆自重，单位：吨">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">允许载重</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="maxLoad"
                                                       placeholder="请输入允许载重，单位：吨" required
                                                       oninvalid="setCustomValidity('请输入车辆最大允许载重')"
                                                       oninput="setCustomValidity('')">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">常拉货物</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="regularGoods"
                                                       placeholder="例：水泥、渣子">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="form-group">
                                            <label for="carNumber" class="col-sm-2 control-label">常跑路线</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="route"
                                                       placeholder="例：成都、重庆">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-freight">
                    <div class="panel-heading"><b>运输信息</b></div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="image-box">
                                    <input type="hidden" name="frontPicPath" id="frontPicPathId"
                                           data-file-flag="frontPicPath">
                                    <img src="${base}/res/images/no_pic.png" id="frontPicPath">
                                    <span class="title">车辆正面</span>
                                </div>
                                <div class="btn-box">
                                    <input type="file" name="file" class="file-input"
                                           data-target="frontPicPath" accept="image/*"/>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="image-box">
                                    <input type="hidden" name="sidePicPath" id="sidePicPathId"
                                           data-file-flag="sidePicPath">
                                    <img src="${base}/res/images/no_pic.png" id="sidePicPath">
                                    <span class="title">车辆侧面</span>
                                </div>
                                <div class="btn-box">
                                    <input type="file" name="file" class="file-input"
                                           data-target="sidePicPath" accept="image/*"/>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="image-box">
                                    <input type="hidden" name="drivingPicPath" id="drivingPicPathId"
                                           data-file-flag="drivingPicPath">
                                    <img src="${base}/res/images/no_pic.png" id="drivingPicPath">
                                    <span class="title">行驶证</span>
                                </div>
                                <div class="btn-box">
                                    <input type="file" name="file" class="file-input"
                                           data-target="drivingPicPath" accept="image/*"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    var carId, ctx;
    $(document).ready(function () {
        ctx = $('#base').val();
        var fileInput = $(".file-input");
        fileInput.fileinput({
            overwriteInitial: true,
            maxFileSize: 1500,
            language: 'zh',
            showCaption: false,
            showPreview: false,
            showRemove: false,
            showUpload: false,
            showCancel: false,
            showClose: false,
            dropZoneEnabled: false,
            allowedFileTypes: ['image'],
            uploadUrl: ctx + "/file"
        }).on("filebatchselected", function (event, files) {
            $(this).fileinput("upload");
        }).on('filepreupload', function (event, data, previewId, index) {
            showLoading('文件上传中');
        }).on('fileuploaded', function (event, data, previewId, index) {
            var target = $(this).data("target");
            if (target && target !== '') {
                var $target = $('#' + target);
                var resp = data.response;
                if (resp.code === 'SUCCESS') {
                    var obj = resp.obj;
                    var imageUrl = ctx + '/file/image/' + obj.id;
                    $('#' + target + 'Id').val(obj.id);
                    $target.attr('src', imageUrl);
                }
            }
            bootbox.hideAll();
        });

        carId = $('#carId').val();
        var dataForm = $('#dataForm');
        if (carId !== '') {
            $.httpclient.get(API_CAR + '/' + carId, {
                time: new Date().getTime()
            }, function (data) {
                if (data.code === 'SUCCESS') {
                    fullForm(dataForm, data.obj);

                    var frontPicPath = data.obj['frontPicPath'];
                    var sidePicPath = data.obj['sidePicPath'];
                    var drivingPicPath = data.obj['drivingPicPath'];

                    if (frontPicPath) {
                        $('#frontPicPathId').val(data.obj['frontPicPath']);
                        $('#frontPicPath').attr('src', ctx + '/file/image/' + data.obj['frontPicPath']);
                    }
                    if (sidePicPath) {
                        $('#sidePicPathId').val(data.obj['sidePicPath']);
                        $('#sidePicPath').attr('src', ctx + '/file/image/' + sidePicPath);
                    }

                    if (drivingPicPath) {
                        $('#drivingPicPathId').val(data.obj['drivingPicPath']);
                        $('#drivingPicPath').attr('src', ctx + '/file/image/' + drivingPicPath);
                    }
                }
            });
        }


        dataForm.submit(function (data) {
            var target = data.target;
            var formData = {};

            var fieldInputs = $(target).find('input,select');
            for (var i = 0; i < fieldInputs.length; i++) {
                var item = fieldInputs[i];
                if (item.name && item.name !== '') {
                    formData[item.name] = item.value;
                }
            }
            var id = formData["id"];

            if (!isVehicleNumber(formData['carNumber'])) {
                bootbox.alert('请检查车牌号');
                return false;
            }

            if (id && id !== '') {
                $.httpclient.put(API_CAR, JSON.stringify(formData), function (data) {
                    if (data.code === 'SUCCESS') {
                        location.href = ctx + '/admin/car/' + data.obj.id;
                    } else {
                        bootbox.alert(data.message);
                    }
                })
            } else {
                $.httpclient.post(API_CAR, JSON.stringify(formData), function (data) {
                    if (data.code === 'SUCCESS') {
                        location.href = ctx + '/admin/car/' + data.obj.id;
                    } else {
                        bootbox.alert(data.message);
                    }
                })
            }
            return false;
        });

    });

    function cancelJump() {
        if (carId !== '') {
            location.href = $('#base').val() + '/admin/car/' + carId;
        } else {
            location.href = $('#base').val() + '/admin/car';
        }
    }
</script>
